<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>元素显示模式</title>
    <style>

        body {
            background-color: gray;
        }

        #d1 {
            background-color: red;
        }

        #d2 {
            background-color: green;
        }

        #d3 {
            background-color: blue;
        }
        .one{
            background-color: skyblue;
        }
        .two{
            background-color: orange;
        }
        /*img是一个可以调整宽高的行内元素，行内块元素inline-block*/
        img {
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<div id="d1">
    一起战斗吧111111111111111111111111111
</div>
<div id="d2">
    一起战斗吧111111111111111111111111111
</div>
<div id="d3">
    一起战斗吧111111111111111111111111111
</div>

<hr>
<!--行内元素,span是代表-->
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<span class="one">人之初</span>
<span class="two">性本善</span>
<hr>
<!--行内块元素，可以通过css调整宽高,img是代表-->
<img src="../../images/元素显示模式.png">
</body>
</html>